<template>
  <div class="order_goods">
    <NavBar title="我的订单" />
    <Tabs v-model:active="active">
      <Tab title="全部">
        <div class="card-1">
          <div class="head">
            <span>客房订单</span>
            <span>已完成</span>
          </div>
          <hr>
          <div class="con">
            <img
              src="https://img.axureshop.com/8b/ae/ba/8baeba855d024807a57913bdc6291c06/images/%E6%A1%86%E6%9E%B6/u538.jpg"
              alt="" width="100px">
            <div class="sp">
              <span style="margin-left: 2px;">豪华大床房</span>
              <br>
              <span>￥598.00</span>
            </div>
            <p>1晚</p>
          </div>
          <hr>
          <div class="sp1">
            <span>2018/12/29 &nbsp;&nbsp;21:30</span>
            <a style="margin-left: 85px;">实付金额：<a style="color: red;">￥298</a>
            </a>
          </div>
          <hr>
          <div class="btn">

            <button style="background-color: #99CC33;" @click="show = !show">
              评价
            </button>
            <button style="margin-left: 10px;background-color: #4ABDCC;">
              <!-- 路由跳转 -->
              <router-link to="/admin/Predetermine" style="color: white;">再次预定</router-link>
            </button>
          </div>
        </div>
        <div class="card-1">
          <div class="head">
            <span>餐饮订单</span>
            <span style="color: #CC6629;">待付款</span>
          </div>
          <hr>
          <div class="con">
            <img
              src="https://img.axureshop.com/8b/ae/ba/8baeba855d024807a57913bdc6291c06/images/%E6%A1%86%E6%9E%B6/u560.jpg"
              alt="" width="100px">
            <div class="sp">
              <span style="margin-left: 2px;">锅包肉</span>
              <br>
              <span>￥36.00</span>
            </div>
            <p>2份</p>
          </div>
          <hr>
          <div class="sp1">
            <span>2018/12/29 &nbsp;&nbsp;21:30</span>
            <a style="margin-left: 85px;">实付金额：<a style="color: red;">￥68</a>
            </a>
          </div>
          <hr>
          <div class="btn">
            <button style="margin-left: 60px;background-color: #CC9900;">立即支付</button>
          </div>
        </div>
        <div class="card-1">
          <div class="head">
            <span>客房订单</span>
            <span>已完成</span>
          </div>
          <hr>
          <div class="con">
            <img
              src="https://img.axureshop.com/8b/ae/ba/8baeba855d024807a57913bdc6291c06/images/%E6%A1%86%E6%9E%B6/u538.jpg"
              alt="" width="100px">
            <div class="sp">
              <span style="margin-left: 2px;">豪华大床房</span>
              <br>
              <span>￥598.00</span>
            </div>
            <p>1晚</p>
          </div>
          <hr>
          <div class="sp1">
            <span>2018/12/29 &nbsp;&nbsp;21:30</span>
            <a style="margin-left: 85px;">实付金额：<a style="color: red;">￥298</a>
            </a>
          </div>
          <hr>
          <div class="btn">
            <button style="background-color: #99CC33;">评价</button>
            <button style="margin-left: 10px;background-color: #4ABDCC;">
              <router-link to="/admin/Predetermine" style="color: white;">再次预定</router-link>
            </button>
          </div>
        </div>
        <div class="card-1">
          <div class="head">
            <span>客房订单</span>
            <span>已完成</span>
          </div>
          <hr>
          <div class="con">
            <img
              src="https://img.axureshop.com/8b/ae/ba/8baeba855d024807a57913bdc6291c06/images/%E6%A1%86%E6%9E%B6/u538.jpg"
              alt="" width="100px">
            <div class="sp">
              <span style="margin-left: 2px;">豪华大床房</span>
              <br>
              <span>￥598.00</span>
            </div>
            <p>1晚</p>
          </div>
          <hr>
          <div class="sp1">
            <span>2018/12/29 &nbsp;&nbsp;21:30</span>
            <a style="margin-left: 85px;">实付金额：<a style="color: red;">￥298</a>
            </a>
          </div>
          <hr>
          <div class="btn">
            <button style="background-color: #99CC33;">评价</button>
            <button style="margin-left: 10px;background-color: #4ABDCC;">再次预定</button>
          </div>
        </div>
      </Tab>
      <Tab title="待付款">
        <div class="card-1">
          <div class="head">
            <span>餐饮订单</span>
            <span style="color: #CC6629;">待付款</span>
          </div>
          <hr>
          <div class="con">
            <img
              src="https://img.axureshop.com/8b/ae/ba/8baeba855d024807a57913bdc6291c06/images/%E6%A1%86%E6%9E%B6/u560.jpg"
              alt="" width="100px">
            <div class="sp">
              <span style="margin-left: 2px;">锅包肉</span>
              <br>
              <span>￥36.00</span>
            </div>
            <p>2份</p>
          </div>
          <hr>
          <div class="sp1">
            <span>2018/12/29 &nbsp;&nbsp;21:30</span>
            <a style="margin-left: 85px;">实付金额：<a style="color: red;">￥68</a>
            </a>
          </div>
          <hr>
          <div class="btn">
            <button style="margin-left: 60px;background-color: #CC9900;">立即支付</button>
          </div>
        </div>
      </Tab>
      <Tab title="已完成">
        <div class="card-1">
          <div class="head">
            <span>客房订单</span>
            <span>已完成</span>
          </div>
          <hr>
          <div class="con">
            <img
              src="https://img.axureshop.com/8b/ae/ba/8baeba855d024807a57913bdc6291c06/images/%E6%A1%86%E6%9E%B6/u538.jpg"
              alt="" width="100px">
            <div class="sp">
              <span style="margin-left: 2px;">豪华大床房</span>
              <br>
              <span>￥598.00</span>
            </div>
            <p>1晚</p>
          </div>
          <hr>
          <div class="sp1">
            <span>2018/12/29 &nbsp;&nbsp;21:30</span>
            <a style="margin-left: 85px;">实付金额：<a style="color: red;">￥298</a>
            </a>
          </div>
          <hr>
          <div class="btn">
            <button style="background-color: #99CC33;">评价</button>
            <button style="margin-left: 10px;background-color: #4ABDCC;">
              <router-link to="/admin/Predetermine" style="color: white;">再次预定</router-link>
            </button>
          </div>
        </div>
        <div class="card-1">
          <div class="head">
            <span>客房订单</span>
            <span>已完成</span>
          </div>
          <hr>
          <div class="con">
            <img
              src="https://img.axureshop.com/8b/ae/ba/8baeba855d024807a57913bdc6291c06/images/%E6%A1%86%E6%9E%B6/u538.jpg"
              alt="" width="100px">
            <div class="sp">
              <span style="margin-left: 2px;">豪华大床房</span>
              <br>
              <span>￥598.00</span>
            </div>
            <p>1晚</p>
          </div>
          <hr>
          <div class="sp1">
            <span>2018/12/29 &nbsp;&nbsp;21:30</span>
            <a style="margin-left: 85px;">实付金额：<a style="color: red;">￥298</a>
            </a>
          </div>
          <hr>
          <div class="btn">
            <button style="background-color: #99CC33;">评价</button>
            <button style="margin-left: 10px;background-color: #4ABDCC;">
              <router-link to="/admin/Predetermine" style="color: white;">再次预定</router-link>
            </button>
          </div>
        </div>
      </Tab>
      <Tab title="已取消">
        <div class="card-1">
          <div class="head">
            <span>客房订单</span>
            <span>已取消</span>
          </div>
          <hr>
          <div class="con">
            <img
              src="https://img.axureshop.com/8b/ae/ba/8baeba855d024807a57913bdc6291c06/images/%E6%A1%86%E6%9E%B6/u538.jpg"
              alt="" width="100px">
            <div class="sp">
              <span style="margin-left: 2px;">豪华大床房</span>
              <br>
              <span>￥598.00</span>
            </div>
            <p>1晚</p>
          </div>
          <hr>
          <div class="sp1">
            <span>2018/12/29 &nbsp;&nbsp;21:30</span>
            <a style="margin-left: 85px;">退款金额：<a style="color: red;">￥298</a>
            </a>
          </div>
          <hr>
          <div class="btn">
            <button style="margin-left: 60px;background-color: #4ABDCC;">
              <router-link to="/admin/Predetermine" style="color: white;">再次预定</router-link>
            </button>
          </div>
        </div>
        <div class="card-1">
          <div class="head">
            <span>客房订单</span>
            <span>已取消</span>
          </div>
          <hr>
          <div class="con">
            <img
              src="https://img.axureshop.com/8b/ae/ba/8baeba855d024807a57913bdc6291c06/images/%E6%A1%86%E6%9E%B6/u538.jpg"
              alt="" width="100px">
            <div class="sp">
              <span style="margin-left: 2px;">豪华大床房</span>
              <br>
              <span>￥598.00</span>
            </div>
            <p>1晚</p>
          </div>
          <hr>
          <div class="sp1">
            <span>2018/12/29 &nbsp;&nbsp;21:30</span>
            <a style="margin-left: 85px;">退款金额：<a style="color: red;">￥298</a>
            </a>
          </div>
          <hr>
          <div class="btn">
            <button style="margin-left: 60px;background-color: #4ABDCC;">
              <router-link to="/admin/Predetermine" style="color: white;">再次预定</router-link>
            </button>
          </div>
        </div>
      </Tab>
    </Tabs>
  </div>
  <Dialog v-model:show="show" title="" show-cancel-button style="width: 260px;">
    <img src='../../../public/ping.png' style="width: 200px;margin-left: 30px;margin-top: 15px;" />
    <h2 style="text-align: center;">给个好评呗</h2>
    <span style="margin-left: 60px;font-size: 14px;color: #bbb;">万枫酒店需要您的支持,</span><br>
    <span style="margin-left:30px;font-size: 14px;color: #bbb;">我们诚挚希望能够得到您的鼓励！</span>
    <button class="gu">
      <router-link to="/evaluate" style="color: #8CB2F7;">去评价</router-link>
    </button>
  </Dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { NavBar, Tab, Tabs, Card, Tag, Button, Dialog } from 'vant';
let show = ref(false);
</script>
<style>
.card-1 {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 5px;
  margin: 10px;
  box-sizing: border-box;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.head span:nth-child(2) {
  /* color: #999; */
  font-size: 14px;
  font-weight: normal;
}

hr {
  margin: 10px 0;
  background-color: #dddada;
  height: 1px;
  width: 346px;
  border: none;
  margin-left: -5px;
}
.con,
.sp1,
.btn {
  font-size: 15px;
}
.sp {
  margin-top: -65px;
  margin-left: 100px;
  padding: 10px 10px;
}
p {
  margin-left: 300px;
  margin-top: -30px;
}
.sp1 span {
  color: gray;
}
.btn {
  margin-left: 190px;
}
.btn button {
  padding: 5px 10px;
  border-radius: 5px;
  border: 0;
  color: #Fff;
}
.gu{
  margin-top: 25px;
  margin-left: 20px;
  border-radius: 50px;
  padding: 10px 80px;
  background-color: #fff;
  color: #8CB2F7;
  border: 3px solid #8CB2F7;
}
</style>